<template>
	<navigatorComp title="真实墓地" bgcColor="#0E0E0E" fontColor="#fff"></navigatorComp>
	<view class="realTempleContent" :style="{ height: height + 'px' }">
		<view
			class="trueCel_inputBox"
			style="margin-bottom: 24rpx"
			:style="{ pointerEvents: !isSelf && 'none' }"
		>
			<view class="trueCel_title">碑文</view>
			<u-form
				label-width="100"
				:label-style="{ 'font-size': '28rpx', color: '#FFFFFF' }"
				:model="formData"
				ref="uForm"
			>
				<u-form-item
					:label="'姓名' + (cemeteryItem.peopleList.length == 2 ? '1' : '') + ':'"
					prop="n1"
					:required="isSelf"
				>
					<u-input
						v-model.trim="formData.detail.n1"
						maxlength="10"
						border="none"
						:placeholder="isSelf ? '请输入姓名' : ''"
						clearable
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item
					:label="'出生日期' + (cemeteryItem.peopleList.length == 2 ? '1' : '') + ':'"
					prop="birth"
					:required="isSelf"
				>
					<view
						@click="openTime(1)"
						:class="['placeHolder', formData.detail.b1 && 'value']"
					>
						{{ formData.detail.b1 || (isSelf ? '请选择出生日期' : '') }}
					</view>
					<image
						v-if="isSelf"
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
						@click="openTime(1)"
					></image>
					<up-datetime-picker
						:minDate="new Date('1920/1/1').getTime()"
						:maxDate="new Date().getTime()"
						:show="showBirth1"
						v-model="chooseDate"
						mode="date"
						:formatter="formatter"
						@cancel="showBirth1 = false"
						@confirm="confirmTime($event, 1)"
					></up-datetime-picker>
				</u-form-item>
				<u-form-item
					:label="'逝世日期' + (cemeteryItem.peopleList.length === 2 ? '1' : '') + ':'"
					prop="deadTime"
					:required="isSelf"
				>
					<view
						@click="openTime(2)"
						:class="['placeHolder', formData.detail.d1 && 'value']"
					>
						{{ formData.detail.d1 || (isSelf ? '请选择逝世日期' : '') }}
					</view>
					<image
						v-if="isSelf"
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
						@click="openTime(2)"
					></image>
					<up-datetime-picker
						:minDate="formData.detail.b1 || new Date('1920/1/1').getTime()"
						:maxDate="new Date().getTime()"
						:show="showDeadTime1"
						v-model="chooseDate"
						mode="date"
						:formatter="formatter"
						@cancel="showDeadTime1 = false"
						@confirm="confirmTime($event, 2)"
					></up-datetime-picker>
				</u-form-item>
				<!-- 双人墓地 -->
				<view v-if="cemeteryItem.peopleList.length === 2">
					<u-form-item label="姓名2:" prop="n2" required>
						<u-input
							v-model.trim="formData.detail.n2"
							maxlength="10"
							border="none"
							:placeholder="isSelf ? '请输入姓名' : ''"
							clearable
							inputAlign="right"
							fontSize="28rpx"
							color="#fff"
						/>
					</u-form-item>
					<u-form-item label="出生日期2:" prop="birth" required>
						<view
							@click="openTime(4)"
							:class="['placeHolder', formData.detail.b2 && 'value']"
						>
							{{ formData.detail.b2 || (isSelf ? '请选择出生日期' : '') }}
						</view>
						<image
							class="arrow_right"
							src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
							mode=""
							@click="openTime(4)"
						></image>
						<up-datetime-picker
							:minDate="new Date('1920/1/1').getTime()"
							:maxDate="new Date().getTime()"
							:show="showBirth2"
							v-model="chooseDate"
							mode="date"
							:formatter="formatter"
							@cancel="showBirth2 = false"
							@confirm="confirmTime($event, 4)"
						></up-datetime-picker>
					</u-form-item>
					<u-form-item label="逝世日期2:" prop="deadTime" required>
						<view
							@click="openTime(5)"
							:class="['placeHolder', formData.detail.d2 && 'value']"
						>
							{{ formData.detail.d2 || (isSelf ? '请选择逝世日期' : '') }}
						</view>
						<image
							class="arrow_right"
							src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
							mode=""
							@click="openTime(5)"
						></image>
						<up-datetime-picker
							:minDate="formData.detail.b2 || new Date('1920/1/1').getTime()"
							:maxDate="new Date().getTime()"
							:show="showDeadTime2"
							v-model="chooseDate"
							mode="date"
							:formatter="formatter"
							@cancel="showDeadTime2 = false"
							@confirm="confirmTime($event, 5)"
						></up-datetime-picker>
					</u-form-item>
				</view>
				<u-form-item
					label="生平简介:"
					prop="summarized"
					labelPosition="top"
					labelWidth="300rpx"
				>
					<view class="trueCel_inputBox_intro">
						<up-textarea
							v-model.trim="formData.detail.jj"
							disableDefaultPadding
							placeholderClass="placeholderClass"
							:placeholder="isSelf ? '请输入生平简介' : ''"
							border="none"
							maxlength="100"
							count
							height="300rpx"
						></up-textarea>
					</view>
				</u-form-item>
				<u-form-item label="立碑人:" prop="lbr">
					<u-input
						v-model.trim="formData.detail.lbr"
						maxlength="10"
						border="none"
						:placeholder="isSelf ? '请输入立碑人' : ''"
						clearable
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item label="立碑时间:" prop="lbt">
					<view
						@click="openTime(3)"
						:class="['placeHolder', formData.detail.lbt && 'value']"
					>
						{{ formData.detail.lbt || (isSelf ? '请选择立碑时间' : '') }}
					</view>
					<image
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
						@click="openTime(3)"
					></image>
					<up-datetime-picker
						:minDate="new Date('1920/1/1').getTime()"
						:maxDate="new Date().getTime()"
						:show="showSteleTime"
						v-model="chooseDate"
						mode="date"
						:formatter="formatter"
						@cancel="showSteleTime = false"
						@confirm="confirmTime($event, 3)"
					></up-datetime-picker>
				</u-form-item>
			</u-form>
		</view>

		<view class="trueCel_inputBox" style="margin-bottom: 24rpx">
			<view class="trueCel_title">墓志铭</view>
			<u-form
				label-width="100"
				:label-style="{ 'font-size': '28rpx', color: '#FFFFFF' }"
				:model="formData"
				ref="uForm"
			>
				<u-form-item label="序文:" prop="xw" labelPosition="top" labelWidth="300rpx">
					<view class="trueCel_inputBox_intro">
						<up-textarea
							v-model.trim="formData.detail.xw"
							placeholderClass="placeholderClass"
							disableDefaultPadding
							:placeholder="isSelf ? '请输入序文' : ''"
							border="none"
							maxlength="50"
							count
							inputAlign="right"
							fontSize="28rpx"
							color="#fff"
							height="200rpx"
						></up-textarea>
					</view>
				</u-form-item>
				<u-form-item label="韵文:" prop="yw" labelPosition="top" labelWidth="300rpx">
					<view class="trueCel_inputBox_intro">
						<up-textarea
							placeholderClass="placeholderClass"
							v-model.trim="formData.detail.yw"
							disableDefaultPadding
							:placeholder="isSelf ? '请输入韵文' : ''"
							border="none"
							maxlength="50"
							count
							inputAlign="right"
							fontSize="28rpx"
							color="#fff"
							height="200rpx"
						></up-textarea>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="trueCel_inputBox" style="margin-bottom: 24rpx">
			<view class="trueCel_title">墓园定位</view>
			<u-form
				label-width="100"
				:label-style="{ 'font-size': '28rpx', color: '#FFFFFF' }"
				:model="formData"
				ref="uForm"
			>
				<u-form-item label="墓园名称:" prop="cemeteryName">
					<u-input
						v-model.trim="formData.cemeteryName"
						maxlength="20"
						border="none"
						:placeholder="isSelf ? '请输入墓园名称' : ''"
						clearable
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item label="墓园地址:" prop="cemeteryAddress">
					<u-input
						v-model.trim="formData.cemeteryAddress"
						maxlength="20"
						border="none"
						:placeholder="isSelf ? '请输入墓园地址' : ''"
						clearable
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item label="具体地址:" prop="cemeterySpecificLocation">
					<u-input
						v-model.trim="formData.cemeterySpecificLocation"
						maxlength="20"
						border="none"
						:placeholder="isSelf ? '请输入具体地址' : ''"
						clearable
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item label="上传图片:" prop="name" labelPosition="top">
					<view style="width: 100%; margin-top: 32rpx">
						<Upload
							v-if="isSelf"
							ref="uploadRef"
							:list="formData.cemeteryImages"
							@sendImgList="sendImgList"
							:addColor="'#999999'"
							:backgroundColor="'#666666'"
							:isMargin="false"
							:upLength="3"
							:formData="{
								fileType: 'image',
								fileDirType: 'memorial'
							}"
						/>
						<view v-else class="rest_imgList">
							<image
								@click="previewImg(formData.cemeteryImages, item)"
								:src="item"
								mode=""
								v-for="(item, index) in formData.cemeteryImages"
							></image>
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<footerBtn
			:btnDisable="btnDisable"
			v-if="isSelf"
			name="提交"
			@clickBtn="handleSubmit"
			bgcColor=""
		></footerBtn>
	</view>
</template>

<script setup>
import footerBtn from '/components/footerBtn/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { previewImg } from '@/utils/previewImg.js';
import navigatorComp from '/components/navigator/index.vue';
import { ref, reactive, computed } from 'vue';
import Upload from '../../../components/upload/upload.vue';
import HomeApi from '@/API/home/index.js';
import { timeFormat } from '@/node_modules/uview-plus';
import _ from 'lodash';
const homeApi = new HomeApi();

const bottom = getApp().globalData.bottom;

onLoad((o) => {
	//墓园信息
	cemeteryItem.value = JSON.parse(uni.getStorageSync('cemeteryItem'));

	//获取真实墓园信息
	queryInfo();

	//是否是本人创建的墓园
	isSelf.value = cemeteryItem.value.creatorUserId === uni.getStorageSync('userInfo').userId;

	console.log(bottom);
	//高度计算
	// #ifdef H5
	height.value =
		uni.getSystemInfoSync().windowHeight -
		bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
	// #ifdef MP-WEIXIN
	height.value = uni.getSystemInfoSync().screenHeight - bottom - getApp().globalData.navHeight;
	// #endif
});
let isSelf = ref(true); //是否是本人创建的墓园
const uploadRef = ref();
const cemeteryItem = ref({ detail: {} }); //墓碑基本信息
const formData = reactive({
	detail: {} //详细信息
});
const sendImgList = (e) => {
	formData.cemeteryImages = e;
};

const showBirth1 = ref(false);
const showDeadTime1 = ref(false);
const showBirth2 = ref(false);
const showDeadTime2 = ref(false);
const showSteleTime = ref(false);
const chooseDate = ref(new Date());

const height = ref(0);
const btnDisable = computed(() => {
	if (formData.detail.n1 && formData.detail.b1 && formData.detail.d1) {
		if (cemeteryItem.value.peopleList.length === 2) {
			if (formData.detail.n2 && formData.detail.b2 && formData.detail.d2) {
				return false;
			} else {
				return true;
			}
		} else {
			return false;
		}
	} else {
		return true;
	}
});

/**
 * 获取真实墓园信息
 */
const queryInfo = async () => {
	let res = await homeApi.getCemeteryReal({ memorialId: cemeteryItem.value.memorialId });
	if (res.code === 0) {
		console.log(res.data);
		Object.keys(res.data).map((item) => {
			formData[item] = res.data[item];
		});
		formData.detail = formData.detail ? JSON.parse(formData.detail) : {};
		formData.cemeteryImages = JSON.parse(formData.cemeteryImages);
		console.log('formData.cemeteryImages', formData.cemeteryImages);
	}
};

/**
 * 选择时间
 */
const openTime = (type) => {
	if (type === 1) {
		//出生日期1
		showBirth1.value = true;
		chooseDate.value = formData.detail.b1 || new Date();
	} else if (type === 2) {
		//逝世日期1
		showDeadTime1.value = true;
		chooseDate.value = formData.detail.d1 || new Date();
	} else if (type == 3) {
		//立碑时间
		showSteleTime.value = true;
		chooseDate.value = formData.detail.lbt || new Date();
	} else if (type === 4) {
		//出生日期2
		showBirth2.value = true;
		chooseDate.value = formData.detail.b2 || new Date();
	} else if (type === 5) {
		//逝世日期2
		showDeadTime2.value = true;
		chooseDate.value = formData.detail.d2 || new Date();
	}
};
/**
 * 确认时间
 */
const confirmTime = (e, type) => {
	if (type === 1) {
		//出生日期1
		formData.detail.b1 = timeFormat(e.value, 'yyyy-mm-dd');
		showBirth1.value = false;
	} else if (type === 2) {
		//逝世日期1
		formData.detail.d1 = timeFormat(e.value, 'yyyy-mm-dd');
		showDeadTime1.value = false;
	} else if (type === 3) {
		//立碑时间
		formData.detail.lbt = timeFormat(e.value, 'yyyy-mm-dd');
		showSteleTime.value = false;
	} else if (type === 4) {
		//出生日期2
		formData.detail.b2 = timeFormat(e.value, 'yyyy-mm-dd');
		showBirth2.value = false;
	} else if (type === 5) {
		//逝世日期2
		formData.detail.d2 = timeFormat(e.value, 'yyyy-mm-dd');
		showDeadTime2.value = false;
	}
};

const handleSubmit = _.debounce(
	() => {
		submit();
	},
	2000,
	{ leading: true, trailing: false }
);
const submit = () => {
	let params = {
		...formData,
		detail: JSON.stringify(formData.detail),
		cemeteryImages: JSON.stringify(formData.cemeteryImages),
		memorialId: cemeteryItem.value.memorialId
	};
	uni.showLoading();
	homeApi
		.modifyCemeteryApi(params)
		.then((res) => {
			uni.showToast({
				title: '提交成功',
				duration: 500
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
			uni.hideLoading();
		})
		.catch(() => {
			uni.hideLoading();
		});
};

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background-color: #0e0e0e;
}

.plClass {
	font-size: 28rpx;
	color: #999999 !important;
}

.realTempleContent {
	padding: 0 32rpx 32rpx;
	overflow: scroll;
}

.trueCel_inputBox {
	margin-top: 32rpx;
	background: linear-gradient(225deg, rgba(41, 43, 42, 0.4) 0%, rgba(138, 145, 142, 0.4) 100%);
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32rpx 32rpx 0 32rpx;
	box-sizing: border-box;

	.trueCel_title {
		width: 100%;
		font-weight: 500;
		color: #ffffff;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}

	.trueCel_avater {
		width: 132rpx;
		height: 176rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
	}

	.uploadText {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 28rpx;
		margin-bottom: 48rpx;
	}

	.trueCel_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .input-placeholder {
		font-size: 28rpx;
		color: #999999 !important;
	}

	::v-deep .u-form {
		width: 100%;
		box-sizing: border-box;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	::v-deep .u-radio-group--row {
		justify-content: flex-end !important;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #ffffff;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}
}

.trueCel_inputBox_intro {
	width: 100%;
	margin-top: 24rpx;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 32rpx 70rpx 32rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}
}

.upload {
	display: flex;
	flex-wrap: wrap;

	margin-right: -10rpx;

	.add {
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		// margin-bottom: 16rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload_list {
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		position: relative;

		.upload_img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}

		.close {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			right: 0;
			top: 0;
		}
	}
}

.u-button {
	height: 88rpx !important;
}

::v-deep.u-button__text {
	color: #524630 !important;
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;

	view:nth-child(2) {
		color: #999999;
		font-size: 28rpx;
	}
}

.safeArea {
	width: 100%;
	height: 32rpx;
}

.rest_imgList {
	display: flex;
	align-items: center;
	margin-right: -10rpx;

	image {
		flex-shrink: 0;
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
}
</style>
